<template>
  <view>
    <view class="device-card-title tn-text-center"><text >{{ title }}</text> </view><!-- 使用传入的标题 -->
    <view class="card" v-for="(item, index) in dataList" :key="index">
      <view class="card-row">
        <text>通道：{{ item.checkPointName }}</text>
        <text>序列号： {{ item.serialNo.substring(0, 5)+'*****' }}</text>
      </view>
      <view class="card-row tn-mt-xl">
        <text :class="item.status ? 'tn-green-dark_text' : ''">状态： {{ item.status ? '在线' : '离线' }}</text>
        <text>品牌： {{ getBrandName(item.brand) }}</text>
      </view>
      <view class="card-row tn-mt-lg">
        <tn-button click-modifiers="stop" shape="round" :plain="true" text-color="tn-teal-dark" border-color="tn-teal-dark" @click="open(item.id)">
          <template #default>
            <tn-icon name="monitor-fill" color="tn-teal-dark" size="40" />
            <text class="tn-text-sm">开闸</text>
          </template>
        </tn-button>
        <tn-button click-modifiers="stop" shape="round" :plain="true" text-color="tn-blue-dark" border-color="tn-blue-dark" @click="view(item)">
          <template #default>
            <tn-icon name="live-stream-fill" color="tn-blue-dark" size="40" />
            <text class="tn-text-sm">通道</text>
          </template>
        </tn-button>
        <tn-button click-modifiers="stop" shape="round" :plain="true" text-color="tn-orange" border-color="tn-orange" @click="close(item.id)">
          <template #default>
            <tn-icon name="monitor-fill" color="tn-orange" size="40" />
            <text class="tn-text-sm">落闸</text>
          </template>
        </tn-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { DEVICE_BRAND } from "@/utils/dict/Enum";
// 事件传递
const emit = defineEmits(["open","view","close"]);

const open = (value:any) => {
    console.log('open',value);
  emit("open",value);
};
const view = (value:any) => {
    console.log('view',value);
  emit("view",value);
};

const close = (value:any) => {
    console.log('close',value);
  emit("close",value);
};

const getBrandName = (brandKey: string) => {
  let brandName = '';
  for(let i=0; i<DEVICE_BRAND.length; i++){
    if(brandKey==DEVICE_BRAND[i].value){
      brandName = DEVICE_BRAND[i].label;
      break;
    }
  }
  return brandName;
};

const props = defineProps({
  title: {
    type: String,
    default: '设备信息' // 默认标题
  },
  dataList: Array,
  // 事件传值取得key
  keyName:String 
});
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff; /* 确保背景颜色与原样式一致 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  padding: 20px; /* 内边距 */
  margin: 10px; /* 外边距 */
}

.card-row {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 使内容两端对齐 */
}

.device-card-title {
  font-size: 20px; /* 小2号字体大小 */
  font-weight: bold; /* 标题加粗 */
  color: white; /* 字体颜色为白色 */ 
  margin-bottom: 10px; /* 标题与内容的间距 */
}
</style>
